<template>
  <el-drawer
    :title="drawerTitle[drawerType]"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="beforeClose"
    custom-class="tag-drawer require-single-drawer"
    v-drawerResize
  >
    <tag-step :step="step" :active="active"></tag-step>
    <require-propose
      v-if="active === 0"
      ref="singleModule"
      @close="beforeClose"
      @callback="confirm"
      :drawerType="drawerType"
    ></require-propose>
    <require-depart
      v-if="active === 1"
      ref="singleModule"
      @close="beforeClose"
      @callback="confirm"
      :drawerType="drawerType"
    ></require-depart>
    <require-trial
      v-if="active === 2"
      ref="singleModule"
      @close="beforeClose"
      @callback="confirm"
      :drawerType="drawerType"
    ></require-trial>
    <require-review
      v-if="active === 3"
      ref="singleModule"
      @close="beforeClose"
      @callback="confirm"
      :drawerType="drawerType"
    ></require-review>
    <require-clarify
      v-if="active === 4"
      ref="singleModule"
      @close="beforeClose"
      @callback="confirm"
      :drawerType="drawerType"
    ></require-clarify>
    <require-develop v-if="active === 5" ref="singleModule" @close="beforeClose" @callback="confirm"></require-develop>
    <require-validate
      v-if="active === 6"
      ref="singleModule"
      @close="beforeClose"
      @callback="confirm"
    ></require-validate>
    <require-online
      v-if="active === 7 || active === 8"
      ref="singleModule"
      @close="beforeClose"
      @callback="confirm"
    ></require-online>
  </el-drawer>
</template>

<script>
import requirePropose from './require-propose'
import requireDepart from './require-department'
import requireTrial from './require-trial'
import requireReview from './require-review'
import requireClarify from './require-clarify'
import requireDevelop from './require-develop'
import requireValidate from './require-validate'
import requireOnline from './require-online'
export default {
  components: {
    requirePropose,
    requireDepart,
    requireTrial,
    requireReview,
    requireClarify,
    requireDevelop,
    requireValidate,
    requireOnline
  },
  data() {
    return {
      drawerType: 'add',
      drawerTitle: {
        add: '新增需求',
        edit: '需求明细'
      },
      drawerVisible: false,
      active: 0,
      tagStatus: {
        10: 0, // 需求提出
        15: 1, // 部门审核
        20: 2, // 需求初审
        30: 3, // 需求复审
        35: 4, // 需求澄清
        40: 5, // 需求开发
        45: 6, // 标签验证
        50: 7, // 需求验收
        60: 8 // 已验收
      },
      step: [
        {
          icon: 'iconApprove',
          name: '需求提出'
        },
        {
          icon: 'iconApprove',
          name: '部门审核'
        },
        {
          icon: 'iconDevelop',
          name: '需求初审'
        },
        {
          icon: 'iconDevelop',
          name: '需求复审'
        },
        {
          icon: 'iconSubmit',
          name: '需求澄清'
        },
        {
          icon: 'iconOnline',
          name: '需求开发'
        },
        {
          icon: 'iconOnline',
          name: '标签验证'
        },
        {
          icon: 'iconOnline',
          name: '需求验收'
        }
      ],
      tagDetail: {}
    }
  },
  methods: {
    showDrawer(tag) {
      if (tag && tag.tagId) {
        this.drawerType = 'edit'
        this.getDetail(tag)
      } else {
        this.drawerVisible = true
        this.$nextTick(() => this.$refs.singleModule.getSelections())
      }
    },
    getDetail(tag) {
      let url = tag.isChange ? `ast/astTagRequireModify/${tag.tagId}` : `ast/astTagRequireManager/${tag.tagId}`
      this.$ajax({
        url: this.$ajax.setUrl(url),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.tagDetail = Object.assign({}, data.data, { isChange: !!tag.isChange })
          this.active = this.tagStatus[data.data.procStatus]
          this.drawerVisible = true
          this.$nextTick(() => {
            this.$refs.singleModule.init(this.tagDetail)
          })
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    confirm() {
      this.beforeClose()
      this.$emit('callback')
    },
    beforeClose() {
      this.drawerType = 'add'
      this.$refs.singleModule.clearForm()
      this.drawerVisible = false
      this.active = 0
      this.$emit('callback')
    }
  }
}
</script>

<style lang="scss">
.tag-drawer.require-single-drawer {
  .el-drawer__body {
    .drawer-wrap {
      top: 100px;
      &.disabled {
        bottom: 30px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
      }
      .tag-status-list {
        padding: 10px 0;
        li {
          padding: 10px;
          .el-col {
            word-break: break-all;
            line-height: 25px;
          }
        }
      }
    }
  }
  .single-btn {
    margin: 20px 0;
    .el-button {
      margin-right: 20px;
    }
  }
}
</style>
